<template>
    <div>
        <div id="amapcontainer" style="width: 100%; height: 250px"></div>
        <van-button @click="getCurrentLocation">获取位置</van-button>
        <van-button @click="setCenterPoint">最小值</van-button>
    </div>

</template>

<script>
// import { pointlist } from './pointlist'
// import { mapState } from 'vuex'
export default {
    computed: {
        // ...mapState(['tabBarActive'])
    },
    data() {
        return {
            map: null,
            center: {
                lng: '', // 设置默认打卡地点经纬度  115.86458944 28.68945530
                lat: ''
            },
            signin: {
                lng: '',
                lat: ''
            },
            radius: 60,
            // pointlist: pointlist
        }
    },
    methods: {
        // 设置中心点
        setCenterPoint() {
            this.pointlist.forEach(item => {
                item.distance = Number(this.computedDistance([this.signin.lng, this.signin.lat], item.center))
            })
            const distanceArr = this.pointlist.map(a => a.distance)
            const min = distanceArr.reduce((minVal, currVal) => currVal < minVal ? currVal : minVal, distanceArr[0]);
            const minDistanceObj = this.pointlist.find(a => a.distance == min);
            if (minDistanceObj.center && minDistanceObj.center.length == 2) {
                this.center.lng = minDistanceObj.center[0]
                this.center.lat = minDistanceObj.center[1]
            }
        },
        // 获取当前位置并设置中心点
        getCurrentLocation() {
            const that = this
            qing.call('getLocation', {
                success: function (result) {
                    const { data } = result
                    that.signin.lng = data.longitude
                    that.signin.lat = data.latitude
                    that.setCenterPoint()
                    that.isInOrOutFlag();
                    that.initMap()
                }
            });
        },
        computedDistance(p1, p2) {
            // var p1 = [this.center.lng, this.center.lat];
            // var p2 = [this.signin.lng, this.signin.lat];
            // var p1 = [116.434027, 39.941037];
            // var p2 = [116.461665, 39.941564];
            //返回 p1 到 p2 间的地面距离，单位：米
            return AMap.GeometryUtil.distance(p1, p2);
        },
        isInOrOutFlag() {
            const dis = this.computedDistance([this.center.lng, this.center.lat], [this.signin.lng, this.signin.lat])
            if (dis > this.radius) { // 内勤1 外勤2
                // 外勤
                this.$store.commit('updateInOrOutFlag', 2)
            } else {
                this.$store.commit('updateInOrOutFlag', 1)
            }
        },
        initSignInData() {
            // this.getSignInPoint();
            this.getCurrentLocation();
        },
        initMap() {
            setTimeout(() => {
                let map = new AMap.Map('amapcontainer', {
                    zoom: 15,//级别
                    center: [116.39, 39.92],//中心点坐标
                    viewMode: '3D', //使用3D视图
                    resizeEnable: true
                });


                var marker = new AMap.Marker({
                    position: [116.39, 39.92]
                })
                // var signInMarker = new AMap.Marker({
                //     position: new AMap.LngLat(this.signin.lng, this.signin.lat),
                //     icon: "//webapi.amap.com/theme/v1.3/markers/b/start.png",
                // })

                // var marker = new AMap.Marker({
                //     position: new AMap.LngLat(116.39, 39.92),
                //     icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                //     offset: new AMap.Pixel(-13, -30)
                // });
                // map.add(marker);

                map.add(marker);// 打卡中心点添加到地图
                // map.add(signInMarker); // 签到位置
                // 创建信息体
                // 创建信息窗体
                var infoWindow = new AMap.InfoWindow({
                    isCustom: true,  // 使用自定义窗体
                    content: '<div class="cus_info_window">当前位置</div>', // 信息窗体的内容可以是任意 html 片段
                    offset: new AMap.Pixel(10, -30)
                });
                var onMarkerClick = function (e) {
                    infoWindow.open(map, e.target.getPosition()); // 打开信息窗体
                    // e.target 就是被点击的 Marker
                }

                marker.on('click', onMarkerClick); // 绑定 click 事件


                // 签到区域
                // for (let i = 0; i < this.pointlist.length; i += 1) {
                //     let center = this.pointlist[i].center
                //     let circleMarker = new AMap.CircleMarker({
                //         center: center,
                //         radius: this.radius,//3D视图下，CircleMarker半径不要超过64px
                //         strokeColor: 'white',
                //         strokeWeight: 2,
                //         strokeOpacity: 0.5,
                //         fillColor: '#b3d8ff',
                //         fillOpacity: 0.5,
                //         zIndex: 10,
                //         bubble: true,
                //         cursor: 'pointer',
                //         clickable: true
                //     })
                //     circleMarker.setMap(map)
                // }
            }, 800);
        },
        createInfoWindow(marker) {
            alert('绑定事件')
            // 创建信息窗体
            var infoWindow = new AMap.InfoWindow({
                isCustom: true,  // 使用自定义窗体
                content: '<div class="cus_info_window">当前位置</div>', // 信息窗体的内容可以是任意 html 片段
                offset: new AMap.Pixel(10, -10)
            });
            var onMarkerClick = function (e) {
                infoWindow.open(map, e.target.getPosition()); // 打开信息窗体
                // e.target 就是被点击的 Marker
            }

            marker.on('click', onMarkerClick); // 绑定 click 事件
        }
    },
    mounted() {
        //DOM初始化完成进行地图初始化
        this.initMap()
    }
}
</script>

<style lang="scss">
.cus_info_window {
    padding: 10px;
    background-color: #fff;
}
</style>
